Modificare la dimensione dei caratteri al volo
Tutorial scritto il 03/11/03  da Luca Ruggiero
Sito Web: http://www.lukeonweb.net  

Modificare la dimensione dei caratteri di un testo è una utility interessante per gli utenti con difficoltà visive: lo scopo, quindi, è quello di consentire al lettore di ingrandire o rimpicciolire con un semplice click i caratteri del nostro sito, aumentandone usabilità ed accessibilità.

Utilizzeremo una semplice funzione Javascript per creare questo semplice ed utile effetto Dhtml, ma iniziamo dal foglio di stile. E' importante stabilire che per l'esempio utilizzeremo del testo di prova contenuto in una coppia di Tag <p> e </p> a cui assegneremo un ID per identificare quale livello deve essere preso in considerazione per la modifica del font-size.
Di seguito il Css: 


<style type="text/css">
p { font-family: Verdana; font-size: 10px; }
</style>


Lo scopo è semplicemente quello di definire, per chiarezza, un punto di partenza su cui basare il resto dello script.
Di seguito riporto il codice Html per la scelta del font-size desiderato (espresso in pixel) con riferimento alla funzione ImpostaFontSize() che analizzeremo in seguito: 


<p align="center">
<a href="javascript:ImpostaFontSize(10)">10 pixel</a> |
<a href="javascript:ImpostaFontSize(12)">12 pixel</a> |
<a href="javascript:ImpostaFontSize(15)">15 pixel</a> |
<a href="javascript:ImpostaFontSize(20)">20 pixel</a>
</p>

<p align="center" id="LivelloModificabile">
Inserire qui il testo che può cambiare di dimensione...
</p>


Analizziamo brevemente i due passi evidenziati in rosso; la funzione riporta tra parentesi un parametro che identifica il numero in pixel che deve essere assegnato al testo; LivelloModificabile è l'ID del testo a cui farà riferimento la funzione di modifica delle dimensioni del carattere.

Di seguito la funzione Javascript: 


<script language="javascript">
<!--
function ImpostaFontSize(dimensione)
{
document.getElementById('LivelloModificabile').style.fontSize= dimensione;
}
//-->
</script>


La varabile parametrica dimensione serve a standardizzare la funzione in base al font-size impostato al momento del click sulle opzioni scelte.


  
 
Iscriviti allo scambio banner di BannerGratis.it